import React, { useEffect, useState } from "react";
import classes from "./FilterMeals.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons";

function FilterMeals(props) {
    const [keyword, setKeyword] = useState('');

    useEffect(() => {
        const filtertimer = setTimeout(()=>{
            props.onFilter(keyword)
        }, 500)
        //下次触发effect关闭上一次定时器节流
        return () => {
            clearTimeout(filtertimer)
        }
    }, [keyword,props])

    const inputChangeHandler = (e) => {
        setKeyword(e.target.value.trim());
        
    };
    return (
        <div className={classes.filterMeals}>
            <div className={classes.inputOuter}>
                <input
                    value={keyword}
                    onChange={inputChangeHandler}
                    className={classes.searchInput}
                    type="text"
                    placeholder="请输入关键词"
                ></input>
                <FontAwesomeIcon
                    className={classes.searchIcon}
                    icon={faSearch}
                />
            </div>
        </div>
    );
}

export default FilterMeals;
